<template>
    <div class="details-box">
        <div class="page-header" v-if="agreement">
            <div class="page-title">{{ agreement.title }}</div>
            <n-carousel draggable :slides-per-view="col" :loop="false" :show-dots="false"
                        class="page-meta">
                <div class="item side-card glass">
                    <svg-icon class="meta-svg" icon-class="calendar"/>
                    <div class="meta-title">开始时间</div>
                    <div class="meta-text">{{ formatDateTime(agreement.timeStart) }}</div>
                </div>
                <div class="item side-card glass" v-if="agreement.timeEnd">
                    <svg-icon class="meta-svg" icon-class="calendar"/>
                    <div class="meta-title">结束时间</div>
                    <div class="meta-text">{{ formatDateTime(agreement.timeEnd) }}</div>
                </div>
                <div class="item side-card glass">
                    <svg-icon class="meta-svg" icon-class="eye"/>
                    <div class="meta-title">浏览量</div>
                    <div class="meta-text">{{ agreement.viewCount }}</div>
                </div>
                <div class="item side-card glass">
                    <svg-icon class="meta-svg" icon-class="edit"/>
                    <div class="meta-title">字数</div>
                    <div class="meta-text">{{ count(wordNum) }}</div>
                </div>
                <div v-if="app.specialFlag == 2" class="item side-card glass">
                    <svg-icon class="meta-svg" icon-class="edit"/>
                    <div class="meta-title">参与人数</div>
                    <div class="meta-text">{{ peopleNumber(agreement.userList, agreement.peopleNumber) }}</div>
                </div>
            </n-carousel>
            <img class="page-cover" :src="agreement.cover" alt="not img">
            <Waves></Waves>
        </div>
        <div v-if="agreement" class="main-container">
            <div class="left-container" :class="{sub: app.userFlag}">
                <div class="side-card" style="padding: 0;overflow: hidden">
                    <svg-icon v-show="!isCatalog" class="cate-icon but" icon-class="category"
                              @click="isCatalog = true"/>
                    <MdPreview editorId="preview-only" :modelValue="agreement.content"
                               :theme="app.isDark ? 'dark' : 'light'" previewTheme="mk-cute" codeTheme="github"
                               style="min-height: 1.6rem;background: var(--main-2)"/>
                    <!-- default、github、vuepress、mk-cute、smart-blue、cyanosis-->
                    <!-- atom、a11y、github、gradient、kimbie、paraiso、qtcreator、stackoverflow-->
                </div>
                <div class="post-nav">
                    <div class="post-item side-card" v-if="agreement.lastAgreement">
                        <router-link :to="`/special/${agreement.lastAgreement?.id}`" class="post-cover"
                                     :style="cover(agreement.lastAgreement.cover)">
                            <div class="post-text last">上一篇</div>
                            <div class="post-title">{{ agreement.lastAgreement.title }}</div>
                        </router-link>
                    </div>
                    <div class="post-item side-card" v-if="agreement.nextAgreement">
                        <router-link :to="`/special/${agreement.nextAgreement?.id}`" class="post-cover"
                                     :style="cover(agreement.nextAgreement.cover)">
                            <div class="post-text next">下一篇</div>
                            <div class="post-title">{{ agreement.nextAgreement.title }}</div>
                        </router-link>
                    </div>
                </div>
            </div>
            <div v-show="isCatalog" class="right-container" :class="{sub: app.userFlag}">
                <div class="side-card">
                    <p style="text-align: center;font-size: 0.3rem;font-weight: bold">目录结构</p>
                    <svg-icon v-show="isCatalog" class="cate-icon but" icon-class="category"
                              @click="isCatalog = false"/>
                    <MdCatalog class="catalog" editorId="preview-only" :scrollElement="scrollElement"/>
                    <Share class="share-info" :url="href" :title="agreement.title"></Share>
                </div>
                <div class="side-card">
                    <div v-if="app.specialFlag == 1" class="but-box">
                        <n-button type="error" size="small" @click="handlerJoin(1)">应约</n-button>
                    </div>
                    <div v-else-if="app.specialFlag == 2" class="but-box">
                        <n-button type="error" size="small" @click="handlerJoin(2)">参加</n-button>
                    </div>
                    <div v-else-if="app.specialFlag == 3" class="but-box">
                        <n-button type="error" size="small" @click="handlerJoin(3)">应战</n-button>
                        <n-button type="error" size="small" @click="handlerJoin(5)">报名观众</n-button>
                    </div>
                    <div v-else-if="app.specialFlag == 4" class="but-box">
                        <n-button type="error" size="small" @click="handlerJoin(4)">报名</n-button>
                    </div>
                </div>
                <div class="side-card">
                    <div class="title">发表人简介</div>
                    <div class="user-box">
                        <img v-if="user.avatar" class="author-avatar" :src="agreement.userIntro.avatar" alt="author"/>
                        <img v-else class="author-avatar" src="@/assets/images/user/default-author.png" alt="author"/>
                        <div class="user-name">{{ agreement.userIntro.nickname }}</div>
                    </div>
                    <div class="user-intro text">{{ agreement.userIntro.intro }}</div>
                    <div class="but-box">
                        <n-button type="error" size="small">查看</n-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {formatDateTime} from "@/utils/date";
import {AgreementInfo, AgreementPagination, UserIntro} from "@/api/agreement/types";
import useStore from "@/store";
import {getAgreementInfo, joinAgreement} from "@/api/agreement";
import {MdCatalog, MdPreview} from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import {useWindowSize} from "@vueuse/core";
import {Share} from 'vue3-social-share';
import 'vue3-social-share/lib/index.css';

const route = useRoute();
const scrollElement = document.documentElement;
const {app, web, user} = useStore();
const {width, height} = useWindowSize();
const href = window.location.href;

const agreement = ref({
    id: 0,
    cover: "",
    title: "",
    viewCount: 0,
    peopleNumber: 0,
    timeStart: "",
    timeEnd: "",
    userIntro: {} as UserIntro,
    userList: [] as UserIntro[],
    lastAgreement: {} as AgreementPagination,
    nextAgreement: {} as AgreementPagination,
    type: 0,
    isWager: 0,
    wagerContent: "",
    reward: "",
} as AgreementInfo);

const data = reactive({
    isLoading: false,
    wordNum: 0,
    col: 3,
    isCatalog: false,
});
const {isLoading, wordNum, col, isCatalog} = toRefs(data);

watchEffect(() => {
    if (width.value > 800 && width.value < 1200) {
        col.value = 3;
    } else if (width.value < 800) {
        col.value = 2;
    } else {
        col.value = 4;
    }
});
const cover = computed(() => (cover: string) => 'background-image:url(' + cover + ')');

const peopleNumber = computed(() => (list: UserIntro[], num: number) => list.length + '/' + num);
const count = (value: number) => {
    if (value >= 1000) {
        return (value / 1000).toFixed(1) + "k";
    }
    return value;
};
const deleteHTMLTag = (content: string) => {
    return content
        .replace(/<\/?[^>]*>/g, "")
        .replace(/[|]*\n/, "")
        .replace(/&npsp;/gi, "");
};
/**
 * 参与约起
 */
const handlerJoin = (type: number) => {
    if (!user.id) {
        app.setLoginFlag(true);
        return;
    }
    joinAgreement({id: Number(route.params.id), agreementType: type}).then(({data}) => {
        if (data.flag) {
            window.$message?.success(data.data);
        }
    })

};

onMounted(() => {
    console.log(scrollElement)
    getAgreementInfo({
        id: Number(route.params.id),
        agreementType: app.specialFlag
    }).then(({data}) => {
        if (data.flag) {
            agreement.value = data.data;
            console.log(data.data)
            wordNum.value = deleteHTMLTag(agreement.value.content).length;
            isLoading.value = true;
        }
    })
})
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";

.details-box {
  width: 100%;

  .post-nav {
    margin: 0.2rem auto;
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: 0.2rem;

    .post-item {
      position: relative;
      width: 48%;
      height: 2rem;
      padding: 0;
      border-radius: 0.2rem;
      overflow: hidden;

      .post-cover {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        color: var(--main-1);
        background-position: center;
        background-size: cover;
        animation: blur 0.8s ease-in-out forwards;

        &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, #434343, #000);
          opacity: 0.3;
          transition: all 0.2s ease-in-out 0s;
          z-index: -1;
          top: 0;
          left: 0;
        }

        &:hover::before {
          opacity: 0;
        }

        .post-title {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.4rem;
          width: 100%;
          height: 100%;
        }

        .post-text {
          position: absolute;
          font-size: 0.3rem;
          background: var(--main-2);
          padding: 0 0.2rem;
          width: 1.4rem;
        }

        .last {
          top: 0;
          left: 0;
          border-radius: 0 0 0.2rem 0;
        }

        .next {
          bottom: 0;
          right: 0;
          border-radius: 0.2rem 0 0 0;
        }
      }
    }
  }
}
</style>